<template>
<div class="login_box">
  <h1>用户登录</h1>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  <!--遮罩层-->
  <van-overlay :show="show" @click="">
    <div class="wrapper" @click.stop>
      <div class="block" >
        <van-loading class="centered-loading" size="24px" vertical>加载中...</van-loading>
      </div>
    </div>
  </van-overlay>
</div>
</template>

<script>
import {Notify} from "vant";
export default {
  
  name: "LoginView",
  data(){
   return{
    username: 'Viego',
     password: '521521521',
     loading : false,
     show: false
   };
  },
  methods: {
    onSubmit(values){
      console.log(values)
      // 在点击登录按钮时显示加载效果
      this.show = true
      
      
      // 模拟登录过程，延时1秒钟
      setTimeout(() => {
        // 隐藏加载效果
        this.show = false
        // 导航到'home'路由
        this.$router.push("/application/home");
        Notify({ type: 'success', message: '登录成功' });
        // this.$router.push('home');
      }, 500); // 这里延时1秒钟，你可以根据实际情况调整
      
    }
  }
  
}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
  //line-height: 120px;
}
.centered-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
